<template>
  <view v-if="show" class="edu-marquee" :style="[noticeStyle]">
    <view
      :id="elId"
      class="edu-marquee__content"
      :style="[
        {
          animationDuration: animationDuration,
          '-webkit-animationDuration': animationDuration,
          'animation-iteration-count': 1,
          '-webkit-animation-iteration-count': 1,
          animationPlayState: animationPlayState,
          '-webkit-animationPlayState': animationPlayState,
          animationDelay: animationDelay,
          '-webkit-animationDelay': animationDelay,
        },
        contentStyle,
      ]"
      >{{ text }}</view
    >
  </view>
</template>

<script>
export default {
  name: 'Marquee',
  props: {
    text: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#FF9A43',
    },
    fontSize: {
      type: Number,
      default: 14,
    },
    width: {
      type: String,
      default: '',
    },
    frequency: {
      type: Number,
      default: 0,
    },
    // 返回的文字的 样式
    defaultStyle: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
    return {
      textWidth: 0,
      elId: elId,
      show: true,
      speed: 100, // 默认1s滚动100px
      animationDuration: 'none',
      animationPlayState: 'paused',
      animationDelay: '0s',
    }
  },
  computed: {
    noticeStyle() {
      let style = {}
      style.width = this.width ? this.getUnitValue(this.width) : 'auto'
      style.height = this.fontSize * 1.5 + 'px'
      // 合并用户传递的背景色对象
      Object.assign(style, this.defaultStyle)
      return style
    },
    contentStyle() {
      let style = {}
      style.color = this.color
      style.fontSize = this.fontSize + 'px'
      return style
    },
  },
  watch: {
    show(val) {
      if (!val) {
        setTimeout(() => {
          this.show = true
          this.$nextTick(() => {
            this.initSize()
          })
        }, this.frequency * 1000)
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initSize()
    })
  },
  methods: {
    initSize() {
      let query = [],
        textWidth = 0
      let textQuery = new Promise((resolve, reject) => {
        uni
          .createSelectorQuery()
          // #ifndef MP-ALIPAY
          .in(this)
          // #endif
          .select(`#${this.elId}`)
          .boundingClientRect()
          .exec((ret) => {
            this.textWidth = ret[0].width || 0
            resolve()
          })
      })
      query.push(textQuery)
      Promise.all(query).then(() => {
        let duration = this.textWidth / this.speed
        this.animationDuration = `${duration}s`
        setTimeout(() => {
          this.animationPlayState = 'running'
          setTimeout(() => {
            this.close()
          }, duration * 1000)
        }, 1000)
      })
    },
    close() {
      this.show = false
    },
    // 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
    getUnitValue(val) {
      if (/(%|px|rpx|auto)$/.test(val)) return val
      else return val + 'rpx'
    },
  },
}
</script>

<style lang="scss" scoped>
.edu-marquee {
  position: absolute;
  top: 85px;
  left: 0;
  width: 100%;
  z-index: 99;
  overflow: hidden;
}

.edu-marquee__content {
  position: absolute;
  display: block;
  height: 18px;
  line-height: 18px;
  white-space: nowrap;
  padding-left: 100%;
  animation: notice 10s 0s linear infinite both;
  animation-play-state: paused;
}

@keyframes notice {
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>
